{% extends "admin/layout.html" %}

{% block title %}导入资产 - {{ system_config.site_name|default('项目管理系统') }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">批量导入资产</h1>

        </div>
        <a href="{{ url_for('asset.asset_list') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i> 返回列表
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">导入资产数据</h5>
                </div>
                <div class="card-body">
                    <!-- 导入步骤 -->
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="step-item active">
                                <div class="step-number">1</div>
                                <div class="step-label">下载模板</div>
                            </div>
                            <div class="step-connector"></div>
                            <div class="step-item">
                                <div class="step-number">2</div>
                                <div class="step-label">填写数据</div>
                            </div>
                            <div class="step-connector"></div>
                            <div class="step-item">
                                <div class="step-number">3</div>
                                <div class="step-label">上传文件</div>
                            </div>
                            <div class="step-connector"></div>
                            <div class="step-item">
                                <div class="step-number">4</div>
                                <div class="step-label">完成导入</div>
                            </div>
                        </div>
                    </div>

                    <!-- 下载模板 -->
                    <div class="mb-4">
                        <h6>第一步：下载导入模板</h6>
                        <p class="text-muted">请先下载Excel模板文件，按照模板格式填写资产数据。</p>
                        <a href="{{ url_for('asset.download_import_template') }}" class="btn btn-outline-primary">
                            <i class="fas fa-download me-1"></i> 下载导入模板
                        </a>
                    </div>

                    <!-- 数据格式说明 -->
                    <div class="mb-4">
                        <h6>数据格式说明</h6>
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th width="20%">字段名</th>
                                        <th width="15%">是否必填</th>
                                        <th>说明</th>
                                        <th width="25%">示例</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>资产编号</td>
                                        <td><span class="badge bg-danger">必填</span></td>
                                        <td>资产的唯一编号，不能重复</td>
                                        <td>AST-2023-001</td>
                                    </tr>
                                    <tr>
                                        <td>资产名称</td>
                                        <td><span class="badge bg-danger">必填</span></td>
                                        <td>资产的描述性名称</td>
                                        <td>ThinkPad X1 Carbon</td>
                                    </tr>
                                    <tr>
                                        <td>类别</td>
                                        <td><span class="badge bg-danger">必填</span></td>
                                        <td>资产类别名称，必须存在于系统中</td>
                                        <td>笔记本电脑</td>
                                    </tr>
                                    <tr>
                                        <td>型号</td>
                                        <td><span class="badge bg-success">选填</span></td>
                                        <td>资产的具体型号</td>
                                        <td>20KH001JCD</td>
                                    </tr>
                                    <tr>
                                        <td>品牌</td>
                                        <td><span class="badge bg-success">选填</span></td>
                                        <td>资产的品牌名称</td>
                                        <td>联想</td>
                                    </tr>
                                    <tr>
                                        <td>序列号</td>
                                        <td><span class="badge bg-success">选填</span></td>
                                        <td>资产的序列号，不能重复</td>
                                        <td>PF2A2W2X</td>
                                    </tr>
                                    <tr>
                                        <td>购买价格</td>
                                        <td><span class="badge bg-success">选填</span></td>
                                        <td>资产的购买价格（元）</td>
                                        <td>8999.00</td>
                                    </tr>
                                    <tr>
                                        <td>购买日期</td>
                                        <td><span class="badge bg-success">选填</span></td>
                                        <td>购买日期，格式：YYYY-MM-DD</td>
                                        <td>2023-01-15</td>
                                    </tr>
                                    <tr>
                                        <td>位置</td>
                                        <td><span class="badge bg-success">选填</span></td>
                                        <td>资产的存放位置</td>
                                        <td>A栋301室</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 上传文件 -->
                    <div class="mb-4">
                        <h6>第二步：上传数据文件</h6>
                        <p class="text-muted">请选择填写好的Excel文件进行上传。</p>
                        
                        <form method="post" enctype="multipart/form-data">
                            <div class="mb-3">
                                <label for="file" class="form-label">选择Excel文件</label>
                                <input type="file" class="form-control" id="file" name="file" 
                                       accept=".xlsx,.xls" required>
                                <div class="form-text">支持 .xlsx 和 .xls 格式的文件，最大10MB</div>
                            </div>
                            
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="update_existing" name="update_existing">
                                    <label class="form-check-label" for="update_existing">
                                        更新已存在的资产（根据资产编号匹配）
                                    </label>
                                </div>
                            </div>
                            
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-upload me-1"></i> 开始导入
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- 注意事项 -->
                    <div class="alert alert-warning">
                        <h6><i class="fas fa-exclamation-triangle me-1"></i> 注意事项</h6>
                        <ul class="mb-0">
                            <li>请确保Excel文件格式正确，列的顺序与模板一致</li>
                            <li>资产编号和序列号必须唯一，不能重复</li>
                            <li>类别名称必须与系统中已有的类别完全一致</li>
                            <li>建议先导入少量数据进行测试</li>
                            <li>导入过程中如果出现错误，系统会显示具体的错误信息</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.step-item {
    text-align: center;
    flex: 1;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #4e73df;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-weight: bold;
}

.step-item.active .step-number {
    background: #4e73df;
}

.step-item:not(.active) .step-number {
    background: #e9ecef;
    color: #6c757d;
}

.step-label {
    font-size: 0.875rem;
    color: #4e73df;
    font-weight: 500;
}

.step-item:not(.active) .step-label {
    color: #6c757d;
}

.step-connector {
    flex: 1;
    height: 2px;
    background: #e9ecef;
    margin: 0 10px;
    position: relative;
    top: -20px;
}
</style>
{% endblock %}